import React, {Component} from 'react'
import {observer} from 'mobx-react';
import { withRouter, Route, Link } from 'react-router-dom';
import {Tools, Icon} from 'weaver-mobile';
import { ListViewPage } from 'weaver-mobile-page';
import NoData from '../../coms/NoData';
import AdvanceSearchPage from '../../coms/AdvanceSearchPage';
import SearchCondition from './SearchCondition';
const getLabel = Tools.getLabel;

@withRouter
@observer
export default class Subordinate extends Component {
    onRowClick = data => {
        const {store: {resourceRecordLayout: {path}}} = this.props;
        this.props.history.push({
            pathname: path, 
            state: {
                data
            }
        })
    }

    render() {
        const {store} = this.props;
        const { subListViewStore, setSubCurrentPage, subAdvanceSearchPageStore } = store;
        const { loading, hasMore, data } = subListViewStore;
        const listViewPageProps = {
            style: {
                height: '100%'
            },
            store: subListViewStore,
            onRowClick: this.onRowClick,
            onRefresh: () => setSubCurrentPage(1),
            onEndReached: () => setSubCurrentPage(),
            renderFooter: () => {
                if (loading) {
                    return (
                    <div style={{ padding: 30, textAlign: 'center' }}>
                        Loading...
                    </div>
                    );
                } else if(data.length == 0){
                    return (
                        <NoData />
                    )
                } else if (!hasMore) {
                    return (
                    <div className='nomore'>
                        <span className='left' />
                        <span className='name'>{getLabel(390064, '没有更多啦')}</span>
                        <span className='right' />
                    </div>
                    );
                }
                return null;
            }
        }

        return (
            <div className='tabPane content mine'>
                <div>
                    <div className='searchBar'>
                        <SearchCondition store={store}/>
                    </div>
                    <div className='subList' style={{background: data.length == 0 ? '#fff' : null}}>
                        <ListViewPage.Normal {...listViewPageProps} />
                    </div>
                    
                    <Route key={subAdvanceSearchPageStore.id} 
                        path={subAdvanceSearchPageStore.path} 
                        render={() => <AdvanceSearchPage store={subAdvanceSearchPageStore} doSearch={() => setSubCurrentPage(1)}/>} />
                </div>
            </div>
        )
    }
}